<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>搜索结果页面</title>
  <link rel="stylesheet" href="css/search.css">
  <!-- 引入 Font Awesome CSS 文件 -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
  <link rel="stylesheet" href="css/list.css">
  <style>
    .apl {
      position: fixed;
      bottom: 0;
      left: 0;
      width: 100%;
      background-color: #fff; /* 设置背景颜色，如果需要的话 */
      /* 其他样式属性，例如 padding、border 等 */
    }
  </style>
</head>
<body>
<div id="app">
  <div class="tabs">
    <div class="tab"><a href="/music_platform/pages/index.html" style="color: #0c73c2">MUSIC</a></div>
    <div class="tab" @click="showTab('综合')">综合</div>
    <div class="tab" @click="showTab('单曲')">单曲</div>
    <div class="tab" @click="showTab('歌手')">歌手</div>
    <div class="tab" @click="showTab('歌单')">歌单</div>
    <div class="tab" @click="showTab('专辑')">专辑</div>
    <div class="tab" onclick="history.back(-1)">返回</div>
  </div>

  <div class="content">
    <div class="results" id="综合">
      <!-- 综合搜索结果 -->
      <div v-if="error !== ''" class="card link">{{error}}</div>
      <!-- 歌手卡片 -->
      <a :href="'/music_platform/pages/singer_detail.html?sid='+zongHe.singer.sid" v-if="zongHe.singer!==null" class="card link">
        <div class="card-content">
          <img v-if="zongHe.singer.pic" :src="'/music_platform'+zongHe.singer.pic" alt="加载失败" class="singer-image">
          <img v-else src="/music_platform/pages/imgs/singerImg/x.jpg" alt="加载失败" class="singer-image">
          <div class="singer-info">
            <div class="singer-name">{{zongHe.singer.sname}}</div>
            <div class="singer-description">{{zongHe.singer.desc}}</div>
            <div class="fans-count">{{zongHe.singer.fansNum}} 粉丝</div>
            <div>
              <div style="float: left" class="fans-count" v-if="zongHe.singer.singleSongs">{{zongHe.singer.singleSongs.length}} 歌曲</div>
              <div style="float: left" class="fans-count" v-else>0 歌曲</div>
              <div style="float: left; margin-left: 10px" class="fans-count" v-if="zongHe.singer.albums">{{zongHe.singer.albums.length}} 专辑</div>
              <div style="float: left; margin-left: 10px" class="fans-count" v-else>0 专辑</div>
            </div>
          </div>
        </div>
      </a>

      <div class="custom-span">
        <span>单曲</span>
      </div>
      <!-- 单曲卡片 -->
      <div v-for="songs in zongHe.singleSongs" class="single-song-link">
        <div class="song-info-container">
          <a :href="'/music_platform/pages/song_detail.html?mid='+songs.mid" class="song-info">{{songs.mname}}</a>
          <a :href="'/music_platform/pages/singer_detail.html?sid='+songs.singer.sid" class="song-info">{{songs.singer.sname}}</a>
          <a :href="'/music_platform/pages/album_detail.html?alid='+songs.album.alid" class="song-info">{{songs.album.aname}}</a>
          <div class="song-info">{{songs.publishTimeStr}}</div>
          <div class="song-info">
            <i @click="playSong(songs.mid)" class="fa fa-play-circle"></i> <!-- 这是播放按钮图标 -->
          </div>
          <a :href="'/music_platform/download?id='+songs.mid" class="song-info">
            <i class="fas fa-download"></i>
          </a>
        </div>

      </div>

      <!-- 歌单卡片 -->
      <div class="playlist-cards">
        <a :href="'/music_platform/pages/playList_detail.html?plid='+playlist.plid" v-for="playlist in zongHe.playlists" class="playlist-card-link">
          <div class="playlist-card">
            <img :src="'/music_platform' + playlist.pic" alt="歌单封面">
            <div class="playlist-info">
              <div class="playlist-name">{{ playlist.plname }}</div>
              <div class="playlist-creator">
                <img :src="'/music_platform' + playlist.userInfo.pic" alt="错误">
                {{ playlist.userInfo.username}}
              </div>
              <div class="playlist-description">描述: {{ playlist.desc }}</div>
              <div class="playlist-song-count">{{ playlist.songsNum }} 首歌曲</div>
            </div>
          </div>
        </a>
      </div>

      <!-- 填充空白卡片 -->
      <a href="#" v-for="index in emptyPlaylistCount" class="playlist-card-link">
        <div class="playlist-card empty-card">
          <!-- 空白卡片内容 -->
        </div>
      </a>

      <!-- 专辑卡片 -->
      <div class="playlist-cards">
        <a :href="'/music_platform/pages/album_detail.html?alid='+album.alid" v-for="album in zongHe.albums" class="playlist-card-link">
          <div class="playlist-card">
            <img :src="'/music_platform' + album.pic" alt="专辑封面">
            <div class="playlist-info">
              <div class="playlist-name">{{ album.aname }}</div>
              <div class="playlist-description">描述: {{ album.desc }}</div>
              <div class="playlist-song-count">{{ album.songs.length }} 首歌曲</div>
            </div>
          </div>
        </a>
      </div>

    </div>
    <!-- 综合搜索结果 -->


    <div class="results" id="单曲">
      <div v-if="error !== ''" class="card link">{{error}}</div>
      <!-- 单曲搜索结果 -->
      <div v-for="songs in singleSong_pageInfo.list" class="single-song-link">
        <div class="song-info-container">
          <a :href="'/music_platform/pages/song_detail.html?mid='+songs.mid" class="song-info">{{songs.mname}}</a>
          <a :href="'/music_platform/pages/singer_detail.html?sid='+songs.singer.sid" class="song-info">{{songs.singer.sname}}</a>
          <a :href="'/music_platform/pages/album_detail.html?alid='+songs.album.alid" class="song-info">{{songs.album.aname}}</a>
          <div class="song-info">{{songs.publishTimeStr}}</div>
          <div class="song-info">
            <i @click="playSong(songs.mid)" class="fa fa-play-circle"></i> <!-- 这是播放按钮图标 -->
          </div>
          <a :href="'/music_platform/download?id='+songs.mid" class="song-info">
            <i class="fas fa-download"></i>
          </a>
        </div>
      </div>

      <div class="box-footer">
        <div class="pull-left">
          <div class="form-group form-inline">
            总共 {{singleSong_pageInfo.pages}} 页，共 {{singleSong_pageInfo.total}} 条数据。 每页
            <select class="form-control">
              <option>1</option>
              <option>2</option>
              <option>3</option>
              <option>4</option>
              <option>5</option>
            </select> 条
          </div>
        </div>

        <div class="box-tools pull-right">
          <ul class="pagination">
            <li>
              <a @click.prevent="loadSingleSongList(singleSong_pageInfo.navigateFirstPage)" aria-label="Previous">首页</a>
            </li>
            <li><a @click.prevent="loadSingleSongList(singleSong_pageInfo.pageNum-1)">上一页</a></li>
            <li v-for="index in singleSong_pageInfo.pages" :class="{active: singleSong_pageInfo.pageNum == index}">
              <a @click.prevent="loadSingleSongList(index)">{{index}}</a>
            </li>
            <li><a @click.prevent="loadSingleSongList(singleSong_pageInfo.pageNum+1)">下一页</a></li>
            <li>
              <a @click.prevent="loadSingleSongList(singleSong_pageInfo.navigateLastPage)" aria-label="Next">尾页</a>
            </li>
          </ul>
        </div>

      </div>
    </div>

    <div class="results" id="歌手">
      <div v-if="error !== ''" class="card link">{{error}}</div>
      <!-- 歌手搜索结果 -->
      <a :href="'/music_platform/pages/singer_detail.html?sid='+singer.sid" v-for="singer in singer_pageInfo.list" class="card link">
        <div class="card-content">
          <img v-if="singer.pic" :src="'/music_platform'+singer.pic" alt="歌手头像" class="singer-image">
          <img v-else src="/music_platform/pages/imgs/singerImg/x.jpg" alt="歌手头像" class="singer-image">
          <div class="singer-info">
            <div class="singer-name">{{singer.sname}}</div>
            <div class="singer-description">{{singer.desc}}</div>
            <div class="fans-count">{{singer.fansNum}} 粉丝</div>
            <div>
              <div style="float: left" class="fans-count" v-if="singer.singleSongs">{{singer.singleSongs.length}} 歌曲</div>
              <div style="float: left" class="fans-count" v-else>0 歌曲</div>
              <div style="float: left; margin-left: 10px" class="fans-count" v-if="singer.albums">{{singer.albums.length}} 专辑</div>
              <div style="float: left; margin-left: 10px" class="fans-count" v-else>0 专辑</div>
            </div>
          </div>
        </div>
      </a>

      <div class="box-footer">
        <div class="pull-left">
          <div class="form-group form-inline">
            总共 {{singer_pageInfo.pages}} 页，共 {{singer_pageInfo.total}} 条数据。 每页
            <select class="form-control">
              <option>1</option>
              <option>2</option>
              <option>3</option>
              <option>4</option>
              <option>5</option>
            </select> 条
          </div>
        </div>

        <div class="box-tools pull-right">
          <ul class="pagination">
            <li>
              <a @click.prevent="loadSingerList(singer_pageInfo.navigateFirstPage)" aria-label="Previous">首页</a>
            </li>
            <li><a @click.prevent="loadSingerList(singer_pageInfo.pageNum-1)">上一页</a></li>
            <li v-for="index in singer_pageInfo.pages" :class="{active: singer_pageInfo.pageNum == index}">
              <a @click.prevent="loadSingerList(index)">{{index}}</a>
            </li>
            <li><a @click.prevent="loadSingerList(singer_pageInfo.pageNum+1)">下一页</a></li>
            <li>
              <a @click.prevent="loadSingerList(singer_pageInfo.navigateLastPage)" aria-label="Next">尾页</a>
            </li>
          </ul>
        </div>

      </div>
    </div>

    <div class="results" id="歌单">
      <div v-if="error !== ''" class="card link">{{error}}</div>
      <!-- 歌单搜索结果 -->
      <div class="playlist-cards">
        <a :href="'/music_platform/pages/playlist_detail.html?plid='+playlist.plid" v-for="playlist in playlist_pageInfo.list" class="playlist-card-link">
          <div class="playlist-card">
            <img :src="'/music_platform' + playlist.pic" alt="歌单封面">
            <div class="playlist-info">
              <div class="playlist-name">{{ playlist.plname }}</div>
              <div class="playlist-creator">
                <img :src="'/music_platform' + playlist.userInfo.pic" alt="用户头像">
                {{ playlist.userInfo.username}}
              </div>
              <div class="playlist-description">描述: {{ playlist.desc }}</div>
              <div class="playlist-song-count">{{ playlist.songsNum }} 首歌曲</div>
            </div>
          </div>
        </a>
      </div>

      <div class="box-footer">
        <div class="pull-left">
          <div class="form-group form-inline">
            总共 {{playlist_pageInfo.pages}} 页，共 {{playlist_pageInfo.total}} 条数据。 每页
            <select class="form-control">
              <option>1</option>
              <option>2</option>
              <option>3</option>
              <option>4</option>
              <option>5</option>
            </select> 条
          </div>
        </div>

        <div class="box-tools pull-right">
          <ul class="pagination">
            <li>
              <a @click.prevent="loadPlaylist(playlist_pageInfo.navigateFirstPage)" aria-label="Previous">首页</a>
            </li>
            <li><a @click.prevent="loadPlaylist(playlist_pageInfo.pageNum-1)">上一页</a></li>
            <li v-for="index in playlist_pageInfo.pages" :class="{active: playlist_pageInfo.pageNum == index}">
              <a @click.prevent="loadPlaylist(index)">{{index}}</a>
            </li>
            <li><a @click.prevent="loadPlaylist(playlist_pageInfo.pageNum+1)">下一页</a></li>
            <li>
              <a @click.prevent="loadPlaylist(playlist_pageInfo.navigateLastPage)" aria-label="Next">尾页</a>
            </li>
          </ul>
        </div>

      </div>
    </div>

    <div class="results" id="专辑">
      <div v-if="error !== ''" class="card link">{{error}}</div>
      <!-- 专辑搜索结果 -->
      <div class="playlist-cards">
        <a :href="'/music_platform/pages/album_detail.html?alid='+album.alid" v-for="album in album_pageInfo.list" class="playlist-card-link">
          <div class="playlist-card">
            <img :src="'/music_platform' + album.pic" alt="专辑封面">
            <div class="playlist-info">
              <div class="playlist-name">{{ album.aname }}</div>
              <div class="playlist-description">描述: {{ album.desc }}</div>
              <div class="playlist-song-count">{{ album.songs.length }} 首歌曲</div>
            </div>
          </div>
        </a>
      </div>

      <div class="box-footer">
        <div class="pull-left">
          <div class="form-group form-inline">
            总共 {{album_pageInfo.pages}} 页，共 {{album_pageInfo.total}} 条数据。 每页
            <select class="form-control">
              <option>1</option>
              <option>2</option>
              <option>3</option>
              <option>4</option>
              <option>5</option>
            </select> 条
          </div>
        </div>

        <div class="box-tools pull-right">
          <ul class="pagination">
            <li>
              <a @click.prevent="loadAlbumList(album_pageInfo.navigateFirstPage)" aria-label="Previous">首页</a>
            </li>
            <li><a @click.prevent="loadAlbumList(album_pageInfo.pageNum-1)">上一页</a></li>
            <li v-for="index in album_pageInfo.pages" :class="{active: album_pageInfo.pageNum == index}">
              <a @click.prevent="loadAlbumList(index)">{{index}}</a>
            </li>
            <li><a @click.prevent="loadAlbumList(album_pageInfo.pageNum+1)">下一页</a></li>
            <li>
              <a @click.prevent="loadAlbumList(album_pageInfo.navigateLastPage)" aria-label="Next">尾页</a>
            </li>
          </ul>
        </div>

      </div>
    </div>

    <div class="apl">
      <aplayer autoplay
               :music="{
                title: this.audio.title,
                artist: this.audio.artist,
                src: this.audio.src,
                pic: this.audio.pic,
                lrc: this.audio.lrc
            }" :float="true" :showLrc="true" :mutex="true" :listMaxHeight="'60px'":listFolded="true"
               :list=this.list     />
    </div>

    <button @click="togglePlaylist" class="list-toggle-button">播放列表</button>
    <div @mouseleave="listOut" class="list-playlist-container" :class="{ 'show-playlist': isPlaylistOpen }">
        <!-- 清空按钮 -->
        <button @click="clearPlaylist" class="clear-playlist-button">一键清空</button>

        <!-- 播放列表信息 -->
        <div class="playlist-info">
          <p>播放列表信息:</p>
          <p>歌曲数量: {{ list.length }}</p>
          <!-- 可以添加其他相关信息 -->
        </div>
      <!-- 歌曲列表 -->
      <div class="list-song-list">
        <!-- 歌曲条目 -->
        <div v-for="(song,index) in list" :key="song.id" class="list-song-item">
          <div class="list-song-info">
            <strong class="song-info">{{ index + 1 }}. {{ song.title }} - {{ song.artist }}</strong>
          </div>
          <div class="list-delete-button" @click="removeSong(song.id)">删除</div>
        </div>
      </div>
    </div>

  </div>
</div>
<script src="js/jquery-3.5.1.min.js"></script>
<script src="js/vue.js"></script>
<!-- 引入 Vue-APlayer -->
<script src="js/vue-aplayer.min.js"></script>
<script src="js/axios.js"></script>
<script src="js/getParameter.js"></script>
<script>
  const str = getParameter("search");
  new Vue({
    el: "#app",
    data:{
      zongHe:{
        singer:{},
        singleSongs:[],
        playlists:[],
        albums:[]
      },
      singleSong_pageInfo:{},
      singer_pageInfo:{},
      playlist_pageInfo:{list:{}},
      album_pageInfo:{},
      error:"",
      audio: {
        title:'无歌曲',
        artist: '无歌曲',
        src: '',
        pic: '/music_platform/img/R-C.png',
        lrc:''
      },
      list:[],
      isPlaylistOpen: false,
    },
    methods: {
      async playSong(mid){
        let _this = this;
        await axios.get("/music_platform/singleSong/"+mid).then(function (response){
          _this.audio.title = response.data.data.mname;
          _this.audio.artist = response.data.data.singer.sname;
          _this.audio.pic = "/music_platform"+response.data.data.pic;
          _this.audio.lrc = response.data.data.lyc;
          _this.audio.src = "/music_platform"+response.data.data.source;
        })
        this.addAudio();
      },
      async loadSingerList(pageNum){
        const _this = this;
        await axios.get("/music_platform/singer/search",{params:{
          pageNum:pageNum,search:str
          }}).then(function (response) {
          _this.isError(response.data.list);
          _this.singer_pageInfo = response.data;
        });
      },
      async loadSingleSongList(pageNum){
        const _this = this;
        await axios.get("/music_platform/singleSong/search",{params:{
            pageNum:pageNum,search:str
          }}).then(function (response) {
          _this.isError(response.data.list);
          _this.singleSong_pageInfo = response.data;
        });
      },
      async loadPlaylist(pageNum){
        const _this = this;
        await axios.get("/music_platform/playlist/search?",{params:{
            pageNum:pageNum,search:str
          }}).then(function (response) {
          _this.isError(response.data.list);
          _this.playlist_pageInfo = response.data;
        });
      },
      async loadAlbumList(pageNum){
        const _this = this;
        await axios.get("/music_platform/album/search",{params:{
            pageNum:pageNum,search:str
          }}).then(function (response) {
          _this.isError(response.data.list);
          _this.album_pageInfo = response.data;
        });
      },
      async showTab(tabName) {
        const _this = this;
        if (tabName ==='综合'){
          await axios.get("/music_platform/user/search?search="+str).then(function (response) {
            _this.isError(response.data);
            _this.zongHe = response.data;
          });
        }else if (tabName ==='单曲'){
          _this.loadSingleSongList(1);
        }else if (tabName ==='歌手'){
          _this.loadSingerList(1);
        }else if (tabName ==='歌单'){
          _this.loadPlaylist(1);
        }else if (tabName ==='专辑'){
          _this.loadAlbumList(1);
        }
        const tabs = document.querySelectorAll('.tab');
        const results = document.querySelectorAll('.results');

        tabs.forEach(tab => tab.classList.remove('active'));
        results.forEach(result => result.style.display = 'none');

        const selectedTab = document.getElementById(tabName);
        selectedTab.style.display = 'block';

        const selectedTabButton = Array.from(tabs).find(tab => tab.innerText === tabName);
        if (selectedTabButton) {
          selectedTabButton.classList.add('active');
        }
      },
      isError(data){
        if (JSON.stringify(data) === '{"singer":null,"singleSongs":[],"playlists":[],"albums":[]}'||
            JSON.stringify(data) === '[]'){
          this.error = '抱歉，未找到匹配您搜索的内容'
        }else {
          this.error = '';
        }
      },
      addAudio(){
        if (!this.list.some(item => item.title === this.audio.title &&
                item.artist === this.audio.artist)){
          const audioCopy = { ...this.audio };
            this.list.push(audioCopy);
            // 更新数据后将数据保存到localStorage
            localStorage.setItem('myList', JSON.stringify(this.list));
          }
      },
      removeSong(index) {
        // 在这里实现删除歌曲的逻辑
        this.list.splice(index, 1);
        localStorage.setItem('myList', JSON.stringify(this.list));
      },
      togglePlaylist() {
        this.isPlaylistOpen = !this.isPlaylistOpen;
      },
      listOut(){
        this.isPlaylistOpen = false;
      },
      clearPlaylist(){
        this.list = []
        localStorage.setItem('myList', JSON.stringify(this.list));
      }
    },
    mounted() {
      this.showTab('综合'); // 默认显示综合页面
      // 在Vue实例初始化后，尝试从localStorage获取数据
      var storedList = localStorage.getItem('myList');
      if (storedList) {
        // 如果本地存储中有数据，将其解析并赋值给Vue的数据
        this.list = JSON.parse(storedList);
      }
    },
    computed: {
      // 计算需要填充的空白歌单数量
      emptyPlaylistCount() {
        const totalCount = this.zongHe.playlists.length;
        return totalCount % 5 === 0 ? 0 : 5 - (totalCount % 5);
      },
      // 生成空白歌单数据，用于填充空白卡片
      emptyPlaylists() {
        const count = this.emptyPlaylistCount;
        return count > 0 ? new Array(count).fill({}) : [];
      },
    },
    components: {
      Aplayer: window.VueAPlayer  // 注册Vue-APlayer组件
    },
    beforeDestroy() {
      localStorage.setItem('myList', JSON.stringify(this.list));
    }
  });
</script>
</body>
</html>
